<template>
  <!-- my-天气模板-->
  <div class="container">
    <!-- 卡片视图 -->
    <el-card :body-style="{ 'padding-top': '0px' }">
      <!-- https://www.tianqi.com/plugin/  提供的免费 组件-->
      <!-- 光电
      <iframe
        width="280"
        height="300"
        frameborder="0"
        scrolling="no"
        hspace="0"
        src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"
      ></iframe> -->

      <!-- 天气头部 -->
      <div slot="header">
        <el-row class="tq-header">
          <!-- 天气头部左侧数据 -->
          <el-col :span="12">
            <div>
              <i class="el-icon-location-information"></i>
              <span>{{ weather.city }}</span>
            </div>
            <div>
              <span style="font-size: 24px"
                >{{ weather.tem_night }} ~ {{ weather.tem_day }}</span
              >
            </div>
            <div>
              <span>{{ weather.update_time }}</span>
            </div>
          </el-col>
          <!-- 天气头部右侧图片 -->
          <el-col :span="12">
            <div>
              <img
                v-if="weather.wea_img === ''"
                src="./icons/大风_heavy-wind.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === 'yu'"
                src="./icons/大雨_heavy-rain.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === 'yun'"
                src="./icons/多云_cloudy.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === 'lei'"
                src="./icons/雷雨_thunderstorm-one.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === ''"
                src="./icons/晴天_sunny.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === 'qing'"
                src="./icons/太阳_sun.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === 'xue'"
                src="./icons/下雪_snow.svg"
                alt="tubiao"
                style="width: 50px"
              />
              <img
                v-if="weather.wea_img === ''"
                src="./icons/小雨_light-rain.svg"
                alt="tubiao"
                style="width: 50px"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 天气主体内容 -->
      <div class="tq-container">
        <el-row>
          <el-col :span="12">
            <div>白天温度(低温)</div>
            <div>{{ weather.tem_day }}℃</div>
          </el-col>
          <el-col :span="12">
            <div>白天温度(高温)</div>
            <div>{{ weather.tem_night }}℃</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>风向</div>
            <div>{{ weather.win }}</div>
          </el-col>
          <el-col :span="12">
            <div>风力等级</div>
            <div>{{ weather.win_speed }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>风速</div>
            <div>{{ weather.win_meter }}</div>
          </el-col>
          <el-col :span="12">
            <div>空气质量</div>
            <div>良好({{ weather.air }})</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 天气数据
      weather: { a: 123 }
    }
  },
  created() {
    this.getWeather()
  },
  methods: {
    // 获取天气 数据
    getWeather() {
      var xhr = new XMLHttpRequest()
      xhr.open(
        'get',
        'https://www.tianqiapi.com/free/day?appid=28399268&appsecret=9u0WrDbw&cityid=101120101'
      )
      xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          // 获取响应头中服务器返回的 数据格式
          var type = xhr.getResponseHeader('Content-Type')
          // 判断是否为 json
          if (type.indexOf('json') !== -1) {
            this.weather = JSON.parse(xhr.responseText)
          } else if (type.indexOf('xml') !== -1) {
            this.weather = xhr.responseXML
          } else {
            this.weather = xhr.responseText
          }
        }
        console.log(this.weather)
      }
      xhr.send()
    }
  }
}
</script>
<style lang="less" scoped>
.container /deep/ .el-card__header {
  border-bottom: 0;
  padding: 0;
}
.tq-header {
  display: flex;
  align-items: center;
}
.el-row {
  // background-color: aquamarine;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.tq-container {
  .el-row {
    border-top: 1px solid #eee;
    padding: 10px 0;
    .el-col {
      div {
        &:nth-child(1) {
          font-size: 12px;
          font-weight: 150;
          color: #666;
        }
        &:nth-child(2) {
          font-size: 18px;
          color: #333;
        }
      }
    }
  }
}
.el-card.is-always-shadow{
  box-shadow: 0;
}
</style>
